<template>
  <div>hello</div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from "vue";
export default {
  name: "App",
  setup() {
    console.log("类似于created")

    //  挂载的生命周期
    onBeforeMount(()=>{
      console.log("Vue3.0类似于beforeMount ");
    })

    onMounted(()=>{
      console.log("Vue3.0类似于mounted ");
    })

    //   跟新阶段的生命周期
    onBeforeUpdate(()=>{
      console.log("Vue3.0类似于beforeUpdate ");
    })

    onUpdated(()=>{
      console.log("Vue3.0类似于 updated  ");
    })


    // 销毁阶段生命周期
    onBeforeUnmount(()=>{
      console.log("Vue3.0类似beforeDestory ");
    })

    onUnmounted(()=>{
      console.log("Vue3.0类似于destoryed ");
    })

  },


  beforeCreate(){
    console.log( 'vue2.0 beforeCreate' )
  },
  created(){
    console.log( 'vue2.0 created' )
  },
  beforeMount(){
    console.log( 'vue2.0 beforeMount' )
  },
  mounted(){
    console.log( 'vue2.0 mounted' )
  },
  beforeUpdate(){
    console.log( 'vue2.0 beforeUpdate' )
  },
  updated(){
    console.log( 'vue2.0 updated' )
  },

  // vue3中你仍然可以去使用vue2的生命周期。
  // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount
  //                destroyed==> unmounted
  // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
  // setUp这个生命周期发生在beforeCreate和created之前的哈。
  beforeUnmount() {
    console.log( 'vue2.0 beforeDestroy' )
  },
  //destroyed==> unmounted
  unmounted(){
    console.log( 'vue2.0 destroyed' )
  }
};</script>


<style scoped>

</style>
